import styled from 'styled-components'

export const StyledWrap = styled.div.attrs(({ isSelected }: { isSelected: boolean }) => ({
	className: isSelected ? 'selected' : '',
}))<{ isSelected: boolean }>`
	white-space: nowrap;
	display: flex;
	align-items: center;
	user-select: none;
	margin: 0 8px 2px;
	&:hover,
	&.selected {
		background: url()
			no-repeat #5eb9ef;
		background: linear-gradient(90deg, #2d8bc0, #53afe4);
		color: #fff;
		.icon-check-box {
			background-position: ${({ isSelected }) => {
				return isSelected ? '-93px -1672px' : '-237px -1672px'
			}};
		}
	}
	.icon-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 4px;
		cursor: pointer;
	}
	.item-content {
		flex: 1;
		position: relative;
		display: flex;
		align-items: center;
		margin-left: 4px;
		cursor: default;
		min-width: 0;
		overflow: hidden;
		> span:nth-of-type(1) {
			flex: 0 0 24px;
			margin-right: 10px;
		}
		.item-name {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: calc(100% - 24px - 10px);
		}
		.avatar-tip {
			position: absolute;
			bottom: 0;
			left: 14px;
		}
	}
	.more-options {
		display: flex;
		height: 36px;
		align-items: center;
		color: #fff;
		margin-right: 6px;
	}
`
export const StyledMoreWrap = styled.div`
	display: flex;
	.icon-right {
		flex: 0 0 24px;
		margin-right: 10px;
	}
`
export const StyledOptionWrap = styled.div`
	margin: 0 4px;
	//select样式覆盖
	.kd-select-single-wrap .kd-select-item,
	.kd-select-open .kd-select-single-wrap .kd-select-item {
		color: #ffffff;
	}
	.kd-select-open .kd-select-single-wrap::after,
	.kd-select-single-wrap:hover::after,
	.kd-select-single-wrap::after {
		border-color: transparent transparent transparent #ffffff;
	}
	//input样式覆盖
	.kd-input-inner-wrap .kd-input-inner-element input {
		color: #fff;
		border-bottom: 1px solid #ddd;
	}
	&.bitrate-input {
		display: flex;
		align-items: center;
	}
	.unit {
		vertical-align: 5px;
	}
	&.call-type {
		.kd-select-single-wrap .kd-select-item {
			text-align: center;
			width: 37px;
			line-height: 24px;
		}
		.phone-type {
			background-position: -102px -854px;
		}
		.video-type {
			background-position: -16px -854px;
		}
		.audio-type {
			background-position: -154px -854px;
		}
	}
`
export const StyledCallType = styled.div.attrs(({ isActive }: { isActive: boolean }) => ({
	className: isActive ? 'active' : '',
}))<{ isActive: boolean }>`
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 26px;
	&.active,
	&:hover {
		.phone-type {
			background-position: -102px -854px;
		}
		.video-type {
			background-position: -16px -854px;
		}
		.audio-type {
			background-position: -154px -854px;
		}
	}
`
